<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/cart.css">
    <link rel="icon" type="x-con" href="https://www.midea.cn//favicon.ico">
</head>

<body>
    <header></header>
    <div id="part-a">
        <div id="part-a-a">
            <p> 购物车</p>

            <span>配送至：  广东省广州市天河区</span>
            <select name="" id=""></select>
        </div>
    </div>
    <div id="part-b" >
        <p id="p"></p>
        <div id="part-b-a">
            <input type="checkbox" name="" onclick="selectAll(this)" class="itemSelect">
            <span style="margin-left: 5px;color: black;">全选</span>
            <span style="margin-right: 200px;"> 商品信息</span>
            <span>规格</span>
            <span>单价(元)</span>
            <span>数量</span>
            <span>小计(元)</span>
            <span>操作</span>
        </div>
        <div id="part-b-b" >
            <div id="part-b-b-a">
                <input type="checkbox" name="" onclick="selectAll(this)" class="itemSelect">
                <span>美的官网商城</span>
                <a href=""><span >优惠券</span><select name="" id=""></select></a>
            </div>
            <div id="part-b-b-b">
                <p> 满赠</p>
                <span>商品购满1999.00元，即可免费选赠一款商品</span>
                <a href=""><span >查看赠品</span><select name="" id=""></select></a>
                <a href="shangpinye.html" style="background-color: white;">去凑单  ></a>
            </div>

           <!-- <div class="part-b-b-c">
              <input type="checkbox" name="" onclick="selectAll(this)" class="itemSelect">
                <div class="one">
                    <p ></p>
                    <span></span>
                </div>
                <div class="two">
                    <span></span><br><span></span><br>
                </div>
                <div class="three">
                    <span></span><br>
                    <a href="">更多活动<select name="" id=""></select></a>

                </div>

                <div class="four">
                    <button>-</button>
                    <span class="goods-num">1</span>
                    <button>+</button>
                </div>
                <div class="five">
                    <span class="goods-single-price">3999.00</span>
                </div>
                <div class="six">
                    <span>移入收藏夹</span><br>
                    <span style="font-weight:800;" class="del">删除</span>
                </div>
            </div>
        </div>-->
    </div>
    <div id="part-c">
        <div id="part-c-a">
            <input type="checkbox" name="" onclick="selectAll(this)" class="itemSelect">
            <span>全选</span>
            <a href=""> <span>删除</span></a>
            <a href=""><span>移入收藏夹</span></a>
            <a href=""><span>清除失效商品</span></a>
            <p>已选商品 <span class="goods-total-num">0</span>款</p>
            <div>
                <span>合计：</span>
                <span style="font-size: 20px;color: orangered;"  class="goods-total-price"> ¥0.00</span>
            </div>
            <a href="" id="a">去结算</a>
        </div>
    </div>


</body>

</html>
<script src="js/jQuery.js"></script>
<script src="js/cart.js"></script>
<script>
    $("header").load("head.html");

    //显示购物车列表
    $.get("./goodsAndShoppingCart/getShoppingCart.php",
    {vipName:localStorage.getItem("username")},
    function (date) {
        let arr=JSON.parse(date)
        console.log(arr);
       // console.log(date);
        for(let i=0;i<arr.length;i++){
             let car = `
             <div class="part-b-b-c" index="${i}">
             <input type="checkbox" name="" onclick="selectAll(this)">
        <div class="one">
         <p style="background-image:url('${arr[i].beiyong1}');"></p>
          <span >${arr[i].beiyong6}</span>
          </div>
          <div class="two">
                    <span>${arr[i].beiyong8}</span><br><span>${arr[i].beiyong9}</span><br>
                </div>
                <div class="three">
                    <span class="goods-price">${arr[i].goodsPrice}.00</span>
                    <a href="">更多活动<select name="" id=""></select></a>

                </div>

                <div class="four">
                    <button class="reduce">-</button>
                    <span class="goods-num">${arr[i].goodsCount}</span>
                    <button class="add">+</button>
                </div>
                <div class="five">
                    <span class="goods-subtotal">${parseInt(arr[i].goodsCount*arr[i].goodsPrice)}.00</span>
                </div>
                <div class="six">
                    <span>移入收藏夹</span><br>
                    <span style="font-weight:800;" class="del">删除</span>
                </div>
            </div>
       `
       
      $("#part-b-b").append(car)
    };
      let num;
      $(".reduce").click(function(){
       num=$(this).next().html();
     if(num>1){
            num--;
            $(this).next().html(num);          
            $(this).parent().next().children().html(parseInt(num*$(this).parent().prev().find(".goods-price").html())+".00")
            let all=0;   
            for(let i=0;i<$(".goods-subtotal").length;i++){
               all+=$(".goods-subtotal").eq(i).html()/1
             }
             $(".goods-total-price").html(all)  
     }
      })
      $(".add").click(function(){
        num=$(this).prev().html();     
           num++;
           $(this).prev().html(num)  
           $(this).parent().next().children().html(parseInt(num*$(this).parent().prev().find(".goods-price").html())+".00") 
           let all=0;         
           for(let i=0;i<$(".goods-subtotal").length;i++){
         all+=$(".goods-subtotal").eq(i).html()/1
      }
         $(".goods-total-price").html(all)  
      })     
      
      let all=0;   
      for(let i=0;i<$(".goods-subtotal").length;i++){
         all+=$(".goods-subtotal").eq(i).html()/1
      }
         $(".goods-total-price").html(all) 
         $(".goods-total-num").html($(".goods-subtotal").length)

      // 删除商品
    $("#part-b-b").on("click",".del",(function () { 
    let id=arr[$(this).parents(".part-b-b-c").attr("index")].goodsId
    console.log(id)
    $.get("./goodsAndShoppingCart/deleteGoods.php",
    {
        vipName:localStorage.getItem("username"),
        goodsId:id
    },

function (date) {
    console.log()
    if(date.trim()=="1"){
          alert("删除成功")
          location.reload()
        }else{
             alert("删除失败")
        }
    
}
    )
})
 )
         
    })
   



   
    function selectAll(check) { //全选
        $('.itemSelect').prop('checked', check.checked);

    }
   
    
      
    
     
     
  
</script>